/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import React, { useState } from 'react';
import { Button, notification, Tabs } from 'antd';
import { Link, useIntl, history } from 'umi';
import LoginMethodPassword from '@/pages/User/components/LoginMethodPassword';
import type { UserModule } from '@/pages/User/typing';
import login_Left_top from '@/assets/login_left_top.png';
import login_right_bottom from '@/assets/login_right_bottom.png';
import { getUrlQuery } from '@/helpers';
import styles from './Login.less';

const Tab = Tabs.TabPane;

/**
 * Login Methods List
 */
const loginMethods: UserModule.LoginMethod[] = [LoginMethodPassword];

/**
 * User Login Page
 * @constructor
 */
const Page: React.FC = () => {
  const { formatMessage } = useIntl();
  const [loginMethod, setLoginMethod] = useState(loginMethods[0]);

  const onTabChange = (activeKey: string) => {
    loginMethods.forEach((item, index) => {
      if (activeKey === item.id) setLoginMethod(loginMethods[index]);
    });
  };

  const onSubmit = () => {
    loginMethod.checkData().then((validate) => {
      if (validate) {
        loginMethod.submit(loginMethod.getData()).then((response) => {
          if (response.status) {
            notification.success({
              message: formatMessage({ id: 'component.status.success' }),
              description: response.message,
              duration: 1,
              onClose: () => {
                const redirect = getUrlQuery('redirect');
                history.replace(redirect ? decodeURIComponent(redirect) : '/');
              },
            });
          }
        });
      }
    });
  };

  const onKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === 'Enter') {
      onSubmit();
    }
  };

  if (localStorage.getItem('token')) {
    history.replace('/');
    return null;
  }
  return (
    <div className={styles.container}>
      {/*<div className={styles.lang}>*/}
      {/*  <div className={styles.github}>*/}
      {/*    <a target="_blank" href="https://apisix.apache.org">*/}
      {/*      <GithubOutlined />*/}
      {/*    </a>*/}
      {/*  </div>*/}
      {/*  <SelectLang />*/}
      {/*</div>*/}
      <div>
        <div className={styles.login_left_container}>
          <div className={styles.left_header}>
            <img src={login_Left_top} alt="" className={styles.topLeftImg}></img>
          </div>
          <div className={styles.left_main_container}>
              <div className={styles.text_box}>
                <h2>奕云服务网关管理系统V3.0</h2>
                <p>服务网关为前端应用提供统一的访问入口，通过路由策略实现目标服务的调用，从而简化每个微服务访问信息</p>
                <p>包括服务注册、流量控制、路由网关、安全认证、链路监控和负载均衡</p>
                <p>奕云数据交换平台</p>
              </div>
              <div className="left_main_content"></div>
              <div className={styles.left_main_footer}>
                <p>京ICP备16057231号 Copyright©2021</p>
                <p>北京友友天宇系统技术有限公司  保留所有权利</p>
              </div>
            <img src={login_right_bottom} alt="" className={styles.right_bottom_img}></img>
          </div>
        </div>
        {/*<div className={styles.top}>*/}
        {/*  <div className={styles.header}>*/}
        {/*    <Link to="/">*/}
        {/*      <img alt="logo" className={styles.logo} src={logo} />*/}
        {/*    </Link>*/}
        {/*  </div>*/}
        {/*  <div className={styles.desc}>*/}
        {/*    Apache APISIX Dashboard*/}
        {/*    <br />*/}
        {/*    Cloud-Native Microservices API Gateway*/}
        {/*  </div>*/}
        {/*</div>*/}
        <div className={styles.loginBox}>
          <div className={styles.main}>
            <Tabs activeKey={loginMethod.id} onChange={onTabChange} onKeyDown={onKeyDown}>
              {loginMethods.map((item) => (
                <Tab key={item.id} tab={item.name}>
                  {item.render()}
                </Tab>
              ))}
            </Tabs>
            <Button className={styles.submit} size="large" type="primary" onClick={onSubmit}>
              {formatMessage({ id: 'component.user.login' })}
            </Button>
          </div>
        </div>
      </div>
      {/*<Footer />*/}
    </div>
  );
};

export default Page;
